<template>
  <div class="ek-page">
    <div class="page-login">
      <div class="login-bg"></div>
      <div class="login-box">
        <el-tabs v-model="current">
          <el-tab-pane label="账户登录" name="account">
            <AccountLogin />
          </el-tab-pane>
          <el-tab-pane label="手机登录" name="phone">
            <PhoneLogin />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import AccountLogin from "./components/AccountLogin.vue";
import PhoneLogin from "./components/PhoneLogin.vue";

const current = ref("account");
</script>

<style scoped lang="scss">
.page-login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  > .login-bg {
    width: 100%;
    height: 100%;
    background: url("@/assets/image/login/bg.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  >.login-box {
    width: 360px;
    background: #ffffff;
    box-shadow: 4px -2px 16px #00000029;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px 0 20px 0;
    z-index: 8;
 
  }
}
</style>
